<template>

    <div class="app" @lifecycle="lifecycle">

        <!-- 顶部导航 -->
        <!-- <div class="nav">
            <text class="nav-title">{{title}}</text>
        </div> -->

        <!-- 页面内容 -->
        <!-- <scroller class="app">
            <text class="app-desc">{{desc}}</text>
        </scroller> -->
        <tabbar
                ref="reflectName"
                class="tabbar"
                :eeui="{ tabType: 'bottom', textSelectColor: '#d42e12', textUnselectColor: '#999999', underlineGravity: 1,underlineHeight: 1,underlineColor: '#dcdcdc', tabSlideSwitch:false}"
                @pageSelected="pageSelected"
                @tabReselect="tabReselect">

            <!--页签①-->
            <!-- <tabbar-page ref="name_1" @refreshListener="refreshListener" -->
            <tabbar-page ref="name_1" 
                         :eeui="{ tabName: 'name_1', title:'Home', selectedIcon:'tb-home' }">
                         <!-- :eeui="{ tabName: 'name_2', title:'Home', selectedIcon:'./assets/Home_red.png' , unSelectedIcon:'./assets/Home_gray.png' }"> -->
                         <!-- :eeui="{ tabName: 'name_1', title:'首页', selectedIcon:'md-home' }"> -->
                <home :status-bar="test" :content-area="contentStyle" :content-height="contentHeight"></home>
            </tabbar-page>

            <!--页签②-->
            <tabbar-page ref="name_2" 
                         :eeui="{ tabName: 'name_2', title:'Schedule', selectedIcon:'tb-round-list-light' }">
                         <!-- :eeui="{ tabName: 'name_2', title:'Chat',selectedIcon:'./assets/chat_red.png' , unSelectedIcon:'./assets/chat_gray.png' }"> -->
                         <!-- :eeui="{ tabName: 'name_2', title:'好友', message:3, selectedIcon:'./assets/m8.png' , unSelectedIcon:'./assets/m7.png' }"> -->
                <!-- <navbar class="page-navbar" :eeui="{backgroundColor:'#FFFFFF'}">
                    <navbar-item type="title">
                        <text class="page-navbar-title">Wechat</text>
                    </navbar-item>
                </navbar>
                <div class="page-content">
                    <text class="content-text">该服务由微信提供</text>
                </div> -->
                <schedule :status-bar="test" :content-area="contentStyle" :content-height="contentHeight"></schedule>
            </tabbar-page>

            <!--页签③-->
            <!-- <tabbar-page ref="name_3" @refreshListener="refreshListener" -->
            <tabbar-page ref="name_3" 
                         :eeui="{ tabName: 'name_3', title:'Me', selectedIcon:'tb-people'}">
                         <!-- :eeui="{ tabName: 'name_2', title:'Me', selectedIcon:'./assets/Me_red.png' , unSelectedIcon:'./assets/Me_gray.png' }"> -->
                         <!-- :eeui="{ tabName: 'name_3', title:'圈子', message:99, selectedIcon:'md-aperture' }"> -->

                <me :status-bar="test" :content-area="contentStyle" :content-height="contentHeight"></me>
                <!-- <navbar class="page-navbar" :eeui="{backgroundColor:'#FFFFFF'}">
                    <navbar-item type="title">
                        <text class="page-navbar-title">圈子</text>
                    </navbar-item>
                </navbar>
                <div class="page-content">
                    <text class="content-text">page 3</text>
                </div> -->
            </tabbar-page>

            <!--页签④-->
            <tabbar-page ref="name_4" @refreshListener="refreshListener"
                         :eeui="{ tabName: 'name_4', title:'设置', dot:true, selectedIcon:'md-cog' }">
                <navbar class="page-navbar">
                    <navbar-item type="title">
                        <text class="page-navbar-title">设置</text>
                    </navbar-item>
                </navbar>
                <div class="page-content">
                    <text class="content-text">page 4</text>
                </div>
            </tabbar-page>

        </tabbar>

    </div>

</template>

<style scoped>

    .chinahandfont {
        font-family: chinahandfont;
    }

    .app {
        flex: 1;
        /* background-color: #efefef;
        padding-bottom: 100px; */
    }
    /* .home {
        flex: 1;
    } */
    /* .nav {
        width: 750px;
        height: 96px;
        display: flex;
        background-color: #3EB4FF;
    }
    .nav-title {
        flex: 1;
        color: #ffffff;
        text-align: center;
        line-height: 96px;
        font-size: 32px;
        font-weight: 300;
    }
    .app-desc {
        padding: 24px;
        font-size: 36px;
    } */

    .iconr {
        width: 100px;
        height: 100px;
        color: #ffffff;
    }

    .tabbar {
        width: 750px;
        flex: 1;
        /* border-top-style: solid;
        border-top-width: 1px;
        border-top-color: #dcdcdc; */
        /* border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: #dcdcdc; */
        /* padding-bottom: 100px; */
    }

    .page-content {
        width: 750px;
        padding-top: 200px;
        align-items: center;
        /* border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: #dcdcdc; */
    }

    .content-text {
        font-size: 24px;
    }

    .page-navbar {
        width: 750px;
        height: 90px;
        background-color: #ffffff;
    }

    .page-navbar-title {
        color: #ffffff;
        font-size: 28px;
    }

    .page-content-image {
        width: 480px;
        height: 480px;
        margin-top: 30px;
        margin-bottom: 30px;
    }
</style>
<script>
    import home from './home/index';
    import me from './me/index';
    import schedule from './schedule/index';
    import { Utils } from 'weex-ui';
    const eeui = app.requireModule('eeui');
    const WxWechatPlugin = app.requireModule('WxWechatPlugin');

    export default {
        components: { 
            home,me,schedule
        },
        data() {
            return {
                title: 'Hello, World!',
                desc: 'Hello, World!  Hello, EEUI! ',
                // statusBarHeight: weex.config.eros.statusBarHeight ? weex.config.eros.statusBarHeight : 40,
                // touchBarHeight: weex.config.eros.touchBarHeight ? weex.config.eros.touchBarHeight : 20,
            }
        },
        created () {
            console.log("::::::::::::::::::::::::::: " + JSON.stringify(weex.config.env))
            let statusBarPx = eeui.getStatusBarHeightPx();
            // let statusBarSC1 = eeui.getStatusBarHeight();
            console.log("::::::::::::::::::::::::::: --- " + statusBarPx);
            let navBarPx = eeui.getNavigationBarHeightPx();
            // this.$refs.reflectName.setTabSlideSwitch(false);
            // const tabPageHeight = Utils.env.getPageHeight();
            // 如果页面没有导航栏，可以用下面这个计算高度的方法
            const tabPageHeight = weex.config.env.deviceHeight / weex.config.env.deviceWidth * 750;
            console.log("-------------------------：：： " + tabPageHeight)
            // const { tabStyles } = this;
            // this.contentStyle = { height: (tabPageHeight - tabStyles.height - this.statusBarHeight) + 'px' };
            this.contentStyle = { height: (tabPageHeight-10) + 'px' };
            this.contentHeight = tabPageHeight-10;
            // this.contentStyle = { height: (tabPageHeight - 0 - statusBarPx) + 'px' };
            // this.contentHeight = tabPageHeight - 0 - statusBarPx;
            console.log("------------------------- " + this.contentStyle.height)
        },

        mounted() {
            //页面挂载
        },

        beforeCreate: function () {
            const domModule = app.requireModule('dom')
            domModule.addRule('fontFace', {
                'fontFamily': "chinahandfont",
                'src': "url('http://at.alicdn.com/t/font_1364538_r2chz1rt6d.ttf')"
                // 'src': "url('http://at.alicdn.com/t/font_1364538_1b105qzgfi9.ttf')"
                // 'src': "url('http://at.alicdn.com/t/font_1364538_jxck30brhe.ttf')"
                // 'src': "url('http://at.alicdn.com/t/font_1364538_apa1rg18ftm.ttf')"
                // 'src': "url('http://at.alicdn.com/t/font_1364538_2fwnfb6wsrf.ttf')"
                // 'src': "url('http://at.alicdn.com/t/font_1364538_cin699809qv.ttf')"
                // 'src': "url('local://eeui/pages/iconfont/chinahandfont.ttf')"
            });
        },

        methods: {
            /**
             * 生命周期
             * @param res
             */
            lifecycle(res) {
                switch (res.status) {
                    case "ready":
                        //页面挂载(初始化)
                        break;

                    case "resume":
                        //页面激活(恢复)
                        break;

                    case "pause":
                        //页面失活(暂停)
                        break;
                }
            },

            /**
             * 打开新页面
             * @param jsPageName    (String)JS页面名称
             * @param params        (Object)传递参数
             */
            goForward(jsPageName, params) {
                eeui.openPage({
                    url: str + ".js",
                    pageType: "app",
                    statusBarColor: "#3EB4FF",
                    params: params ? params : {}
                });
            },

            /**
             * 返回上一页(关闭当前页)
             */
            goBack() {
                eeui.closePage();
            },
            goWechat() {
              WxWechatPlugin.goWechatCollect();
            },
            pageSelected(params) {
                // eeui.toast({
                //     message: "切换到第" + (params.position + 1) + "个标签页",
                //     gravity: "middle"
                // });
                // if(params.position == 1) {
                //     this.goWechat();
                // }
            },
            tabReselect(params) {
                // eeui.toast({
                //     message: "第" + (params.position + 1) + "个标签页被再次点击",
                //     gravity: "middle"
                // });
                eeui.toast();
                // if(params.position == 1) {
                //     this.goWechat();
                // }
            },
            refreshListener(params) {
                setTimeout(() => {
                    eeui.toast({
                        message: "刷新成功：" + params.tabName,
                        gravity: "middle"
                    });
                    this.$refs[params.tabName].refreshEnd();
                }, 1000);
            }
        }
    }
</script>
